<script setup lang="ts">
import { Failure as AppNutIconFailure } from '@nutui/icons-vue-taro';
import { getCurrentInstance, reLaunch } from '@tarojs/taro';
const params = getCurrentInstance().router?.params as {
  id: string;
  status: string;
};
</script>

<template>
  <view class="deliver-scan-fail app-page--1">
    <app-navbar title="无数据" />
    <scroll-view class="app-page__wrapper" :scroll-y="true" :lower-threshold="100">
      <view class="deliver-scan-fail__wrapper">
        <view class="deliver-scan-fail__header-wrapper">
          <app-nut-icon-failure class="deliver-scan-fail__icon" />
        </view>
        <view>扫码失败</view>
        <view v-if="params.status === 'task_start'" class="deliver-scan-fail__sub-title"
          >请扫描正确二维码开始运送!</view
        >
        <view v-if="params.status === 'task_end'" class="deliver-scan-fail__sub-title"
          >请扫描正确二维码结束运送!</view
        >
      </view>
    </scroll-view>
    <view class="deliver-scan-fail__footer">
      <nut-button
        class="deliver-scan-fail__footer-btn"
        plain
        shape="round"
        type="info"
        @click="
          reLaunch({
            url: `/pages/deliver/detail/index?id=${params.id}&from=default`,
          })
        "
      >
        工单详情
      </nut-button>
      <nut-button
        class="deliver-scan-fail__footer-btn"
        shape="round"
        type="info"
        @click="
          reLaunch({
            url: '/pages/deliver/list/index',
          })
        "
      >
        工单列表
      </nut-button>
    </view>
  </view>
</template>

<style lang="scss">
.deliver-scan-fail {
  text-align: center;
  font-weight: bold;
  font-size: 32px;
  color: #333;

  &__header-wrapper {
    font-size: 38px;
    margin-top: 5vh;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__icon {
    font-size: 72px;
    font-weight: bolder;
    color: #27c530;
    margin-bottom: 20px;
  }
  &__sub-title {
    color: #999;
  }

  &__footer {
    padding: 20px 10px;
    background-color: #fff;
    display: flex;
  }

  &__footer-btn {
    flex: 1;
    margin: 0 10px !important;
    border-radius: 8px !important;
  }
}
</style>
